{extend name="extra@index/base" /}
{block name="title"}SpeedUp外卖{/block}

{block name="css"}

{/block}


{block name='page'}
<style>/**页面css写在这里*/

.content-block {
    margin: 0;
    padding: 0;
    color: #6d6d72;
}

.xuanfu {

    background: #333;
    height: 50px;
    color: #FFF;

    line-height: 50px;
    width: 100%;

    bottom: 0;
    position: fixed;
    display: flex;
    z-index: 1000000;
}

.xuanhao {
    float: right;
    width: 30%;
    background: #ef7575;
    height: 50px;
    text-align: center;
}

.xuanhao a {

    color: white;
}

.text-c {
    display: inline-block !important;
}

.item-title-row {
    width: 60%;
}

.title {
    text-align: center;
    top: 0;
    color: #fff;
}

.popup-overlay {
    z-index: 1;
}

.x-left {
    flex: 1;
}

#tab1 .popup {
    height: 348px;
    top: inherit;
    bottom: 50px;
}

.pop-title {
    background: #eee;
    line-height: 48px;
    text-align: center;
}

.buy {
    position: absolute;
    right: 15px;
    top: 0.6rem;
    width: 140px;
    height: 48px;
    line-height: 48px;
    text-align: right;

}

.buy div div {
    display: inline-block;
}

.buy, .buy i {
    font-size: 30px;
}

.icon-jia {
    top: -2px;
    position: relative;
    color: #11bfb1;
}

.icon-anonymous-iconfont {
    color: #ff8cb3;
}

.x-left i {
    width: 48px;
    height: 48px;
    background: #4cd964;
    border-radius: 50%;
    text-align: center;
    line-height: 48px;
    position: relative;
    top: -18px;
    left: 10px;
    margin-right: 20px;
    font-size: 35px;
    padding: 10px;
}

.ok {

    background: #4cd964 !important;
}
</style>
<!-- 页面开始 -->
<div class="content">
    <div id="vue">
        <header class="bar bar-nav" style="color: white;background: #0099FF">
            <span class="icon icon-left" onclick="$.router.load('/', true, 'left')"></span>
            <h1 class='title'>{{shop.ShopName}}</h1>
        </header>
        <div class="content">
            <div class="buttons-tab">
                <a href="#tab1" class="tab-link active button">菜单</a>
                <a href="#tab2" class="tab-link button">评价</a>
                <a href="#tab3" class="tab-link button">详情</a>
            </div>
            <div class="content-block">
                <div class="tabs">
                    <div id="tab1" class="tab active">
                        <div class="content-block">
                            <!--  https://github.com/guxun12/ele_demo.git -->
                            <div class="list-block media-list">
                                <ul class="heght">
                                    <li v-for="g in goods">
                                        <div class="item-content">
                                            <div class="item-media"><img
                                                    src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                    style='width: 2.2rem;'></div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{g.GoodsName}}</div>
                                                </div>
                                                <div class="item-subtitle">{{g.Price}}元/份</div>


                                                <div class="buy">


                                                    <div v-if="g.CartNumber">
                                                        <div class="mins" @click="mins(g.Id)">
                                                            <i class="iconfont icon-anonymous-iconfont"></i>
                                                        </div>
                                                        <div class="num">{{g.CartNumber}}</div>
                                                        <div class="add" @click="add(g.Id,g.GoodsName,g.Price)">
                                                            <i class="iconfont icon-jia"></i>
                                                        </div>
                                                    </div>

                                                    <div v-else>
                                                        <div>

                                                            <div class="add" @click="add(g.Id,g.GoodsName,g.Price)">
                                                                <i class="iconfont icon-jia"></i>
                                                            </div>

                                                        </div>
                                                    </div>


                                                </div>


                                            </div>


                                        </div>
                                    </li>
                                </ul>
                            </div>


                            <!--/底部-->
                        </div>
                        <div class="xuanfu">
                            <div class="x-left" onclick="pop()">
                                <div><i class="iconfont icon-shaogouwu"></i>¥ {{total}}</div>
                            </div>
                            <div class="xuanhao" :class="{ok:total>=shop.UpPrice}">

                                <span v-if="total<shop.UpPrice">还差{{shop.UpPrice - total}}元起送</span>

                                <a href="/index/index/gouwu?id={:input('id')}" v-else>选好了</a>

                            </div>
                        </div>

                        <div class="popup-overlay close-popup" style="z-index: 9999;"></div>
                        <div class="popup popup-cart">
                            <div class="content-block">
                                <div class="pop-title">购物车</div>

                                <div class="list-block media-list">


                                    <div v-if="cart.length==0"
                                         style="font-size: 2rem;text-align: center;line-height: 300px;">
                                        您还没有购物
                                    </div>


                                    <ul class="heght" style="    height: 300px;overflow: scroll;">
                                        <li v-for="c in cart">
                                            <div class="item-content">
                                                <div class="item-media"><img
                                                        src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                        style='width: 2.2rem;'></div>
                                                <div class="item-inner">
                                                    <div class="item-title-row">
                                                        <div class="item-title">{{c.GoodsName}}</div>
                                                    </div>
                                                    <div class="item-subtitle">{{c.Price}}元/份</div>


                                                    <div class="buy">


                                                        <div v-if="c.Number">
                                                            <div class="mins" @click="mins(c.GoodsId)">
                                                                <i class="iconfont icon-anonymous-iconfont"></i>
                                                            </div>
                                                            <div class="num">{{c.Number}}</div>
                                                            <div class="add"
                                                                 @click="add(c.GoodsId,c.GoodsName,c.Price)">
                                                                <i class="iconfont icon-jia"></i>
                                                            </div>
                                                        </div>

                                                        <div v-else>
                                                            <div>

                                                                <div class="add" @click="add(c.Id,c.GoodsName,c.Price)">
                                                                    <i class="iconfont icon-jia"></i>
                                                                </div>

                                                            </div>
                                                        </div>


                                                    </div>


                                                </div>


                                            </div>
                                        </li>
                                    </ul>


                                </div>


                            </div>
                        </div>


                    </div>

                    <div id="tab2" class="tab active"></div>
                    <div id="tab3" class="tab active"></div>
                </div>
            </div>
        </div>
    </div>

    <script>

        var vm1 = new Vue({
            el: "#vue",
            data: function () {
                return {
                    goods: [],
                    shopId: "{:input('id')}",
                    cart: [],
                    total: 0,
                    shop: {
                        ShopName: "",
                        UpPrice: 0
                    }
                }
            },
            mounted: function () {

                this.$nextTick(function () {
                    window.db = openDatabase('speedup', '1.0', 'Test DB', 2 * 1024 * 1024);
                    db.transaction(function (tx) {
                        tx.executeSql('CREATE TABLE IF NOT EXISTS cart (GoodsId UNIQUE,GoodsName,Price,Number,ShopId)');
                        tx.executeSql('DELETE  FROM cart  WHERE Number=0', [], function (tx, results) {
                            updateCart();
                        })
                    });


                    $("nav").hide()


                    vm1.loadGoods()
                })
            },
            methods: {
                loadGoods: function () {
                    $.showPreloader();
                    $.get('/api/shops/goods', {id: vm1.shopId}, function (ret) {

                        if (ret.shop) {

                            vm1.shop = (ret.shop);
                        }

                        if (ret.code > 0) {
                            vm1.goods = (ret.msg);
                            connectCart2Goods();
                        } else {
                            $.alert("未上架物品", function () {
                                $.router.load("/", true, 'left')
                            })
                        }
                        $.hidePreloader();
                    })
                },
                add: function (id, name, price) {
                    db.transaction(function (tx) {
                        var _tx = tx;
                        tx.executeSql('SELECT * FROM cart where GoodsId = ' + id, [], function (tx, results) {
                            var sqlret = 0;
                            var len = results.rows.length;
                            console.log(results.rows)
                            if (len > 0) {
                                _tx.executeSql('UPDATE  cart SET Number = Number+1 WHERE GoodsId=' + id, [], function (tx, results) {
                                    console.log(results)
                                    sqlret = results.rowsAffected;
                                    if (sqlret) {
                                        updateCart();
                                    }
                                })
                            } else {
                                var sql = 'INSERT INTO cart (GoodsId,GoodsName,Price,Number,ShopId) values (' + id + ',"' + name + '",' + price + ',1,' + vm1.shopId + ')';
                                console.log(sql);
                                _tx.executeSql(sql, [], function (tx, results) {
                                    console.log(results);
                                    sqlret = results.rowsAffected;
                                    if (sqlret) {
                                        updateCart();
                                    }
                                })
                            }
                        }, null);
                    });
                },
                mins: function (id) {
                    db.transaction(function (tx) {
                        tx.executeSql('UPDATE  cart SET Number = Number-1 WHERE GoodsId=' + id, [], function (tx, results) {
                            console.log(results)
                            sqlret = results.rowsAffected;
                            if (sqlret) {

                                updateCart();

                                tx.executeSql('DELETE  FROM cart  WHERE Number=0', [], function (tx, results) {
                                    console.log(results)
                                    if (results.rowsAffected) {
                                        updateCart();
                                    }

                                })


                            }
                        })
                    })
                },
                watch: {},
                computed: {}
            }
        })


        function updateCart() {
            window.db.transaction(function (tx) {
                tx.executeSql('SELECT * FROM cart WHERE ShopId = ' + vm1.shopId, [], function (tx, results) {
                    vm1.cart = results.rows;

                    var t = 0;
                    for (var i = 0; i < vm1.cart.length; i++) {
                        t += parseFloat(vm1.cart[i].Price * vm1.cart[i].Number)
                    }

                    vm1.total = t;


                    connectCart2Goods()
                })
            })
        }


        function connectCart2Goods() {

            for (var i = 0; i < vm1.goods.length; i++) {
                vm1.goods[i].CartNumber = 0;

                for (var j = 0; j < vm1.cart.length; j++) {


                    if (vm1.cart[j].GoodsId == parseInt(vm1.goods[i].Id)) {
                        vm1.goods[i].CartNumber = vm1.cart[j].Number;
                    }
                }
            }

        }


        function pop() {
            if (window.openPop) {
                $.closeModal();
                window.openPop = false;
            } else {
                $.popup('.popup-cart');
                window.openPop = true;
            }
        }


    </script>

</div>
<!-- 页面结束 -->
{/block}


{block name="js"}
{/block}